<template>
  <div class="respurce-main">
    <!-- 资源管理 -->
    <el-card shadow="never" :body-style="{ padding: '20px' }" class="margin-30">
      <div slot="header">
        <el-button type="warning" size="default" @click="daSaveInitMenus">初始化菜单</el-button>
        <el-button type="primary" size="default" @click="doAddMenu">新增菜单</el-button>
      </div>
      <!-- 新增菜单 -->
      <el-dialog
        title="编辑菜单"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <div style="margin-bottom: 25px;">
          <span style="margin-right: 15px; font-weight: 600;">菜单类型</span>
          <el-radio v-model="radio" :label="1">顶级菜单</el-radio>
          <el-radio v-model="radio" :label="2">菜单</el-radio>
          <el-radio v-model="radio" :label="3">按钮</el-radio>
        </div>

        <el-form ref="form" :model="saveMenu" :rules="rules" label-width="80px" :inline="false" size="small">
          <el-form-item v-if="radio===2" label="上级菜单" prop="pid">
            <template>
              <el-cascader
                v-model="saveMenu.pid"
                :options="menusCloneProps"
                :props="props"
              />
            </template>
          </el-form-item>
          <div v-if="radio===3">
            <el-form-item label="所在页面" prop="pid">
              <template>
                <el-cascader
                  v-model="saveMenu.pid"
                  :options="menusCloneProps"
                  :props="props"
                />
              </template>
            </el-form-item>
            <el-form-item label="按钮名称" prop="name">
              <el-input v-model="saveMenu.name" placeholder="前端路由name,唯一" />
            </el-form-item>

            <el-form-item label="权限标识" prop="name">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="排序" prop="sort">
                  <el-input-number v-model="saveMenu.sort" :min="0" />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="层级" prop="level">
                  <el-input-number v-model="saveMenu.level" :min="0" />
                </el-form-item>
              </el-col>
            </el-row>

          </div>

          <div v-if="radio!==3">
            <el-form-item label="路由名称" prop="name">
              <el-input v-model="saveMenu.name" placeholder="前端路由name,唯一" />
            </el-form-item>
            <el-form-item label="路径" prop="path">
              <el-input v-model="saveMenu.path" placeholder="前端路由path,忽略父节点路径" />
            </el-form-item>
            <el-form-item label="组件路径" prop="component">
              <el-input v-model="saveMenu.component" placeholder="前端路由组件路径,比如@/views/foo/foo.vue" />
            </el-form-item>
            <el-form-item label="重定向" prop="redirect">
              <el-input v-model="saveMenu.redirect" placeholder="redirect属性" />
            </el-form-item>

            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="排序" prop="sort">
                  <el-input-number v-model="saveMenu.sort" :min="0" />
                </el-form-item>
              </el-col>
              <el-col v-if="radio===2" :span="10" :offset="0">
                <el-form-item label="层级" prop="level">
                  <el-input-number v-model="saveMenu.level" :min="0" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-if="radio!==3">
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="是否隐藏" prop="hidden">
                  <el-radio v-model="saveMenu.hidden " :label="1">否</el-radio>
                  <el-radio v-model="saveMenu.hidden " :label="2">是</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="是否展开" prop="isSelect">
                  <el-radio v-model="saveMenu.isSelect" :label="1">否</el-radio>
                  <el-radio v-model="saveMenu.isSelect " :label="2">是</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="meta属性" prop="meta">
              <!-- meta: "{\"title\":\"商品管理\",\"icon\":\"el-icon-s-shop\"}" -->
              <template v-for="(item,index) in meta">
                <div :key="index" style="display: flex; justify-content: space-around; align-items: center; width: 70%; margin-bottom: 15px;">
                  <el-input v-model="item.text" style="margin-right: 25px;" placeholder="meta的key" size="small" clearable />
                  <el-input v-model="item.msg" :placeholder="item.placeholder" size="small" clearable />
                  <el-button v-if="meta.length>2" style="margin-left: 25px; color: #f00; font-size: 20px;" type="text" @click="doRemove(index)">-</el-button>
                  <el-button style="margin-left: 25px; font-size: 20px;" type="text" @click="doAddMeat">+</el-button>
                </div>
              </template>
            </el-form-item>
          </div>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 初始化菜单 -->
      <el-dialog
        title="初始化的菜单列表"
        :visible.sync="dialogVisible1"
        width="50%"
      >
        <el-alert
          title="警告提示的文案"
          type="warning"
          style="margin-bottom: 50px;"
        />
        <el-tree
          :data="allMenuList"
          :props="propsTree"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 菜单表格 -->
      <el-table
        :data="allMenuList"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="title"
          label="菜单名称"
          width="200"
          fixed="left"
        />
        <el-table-column
          prop="col.id"
          label="图标"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <i :class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="等级"
          width="100"
          align="center"
        />
        <el-table-column
          prop="sort"
          label="排序"
          width="100"
          align="center"
        />
        <el-table-column
          prop="col.id"
          label="权限标识"
          width="200"
          align="center"
        />
        <el-table-column
          prop="path"
          label="路由"
          width="200"
          align="center"
        />
        <el-table-column
          prop="redirect"
          label="组建路径"
          width="200"
          align="center"
        />
        <el-table-column
          prop="status"
          label="是否可用"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1" effect="dark" type="success">可用</el-tag>
            <el-tag v-if="scope.row.status===0" effect="dark" type="danger">不可用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          fixed="right"
          align="center"
        />
      </el-table>

    </el-card>

  </div>
</template>

<script>
import mix from '@/mixins'
import { findAllPermissions } from '@/api/userController/permission'
var _ = require('lodash')

export default {
  name: 'Respurce',
  mixins: [mix],
  data() {
    return {
      allMenuList: [], // 全部的菜单
      props: { // 配置级联结构
        label: 'title',
        value: 'id',
        expandTrigger: 'hover',
        disabled: 'disabled',
        checkStrictly: true,
        emitPath: false
      },
      propsTree: { // 配置树结构
        label: 'title'
      },
      dialogVisible: false,
      dialogVisible1: false,
      radio: 1, // 新增菜单的显示
      saveMenu: { // 新增菜单的数据 提交菜单的数据
        hidden: 1,
        alwaysShow: 1,
        sort: 0
      },
      meta: [
        {
          text: '',
          msg: '',
          placeholder: '比如商品管理'
        },
        {
          text: '',
          msg: '',
          placeholder: '比如 el-icon-menu'
        }
      ],

      rules: {}
    }
  },

  computed: {
    menusCloneProps() {
      // 克隆一份菜单
      const cloneList = _.cloneDeep(this.allMenuList)
      this.doMenusProps(cloneList)
      return cloneList
    }
  },

  watch: {
    dialogVisible() {
      this.saveMenu = this.$options.data().saveMenu
    }
  },
  created() {
    this.getfindAllPermissions()
  },
  mounted() {
  },

  methods: {
    // 初始化菜单
    daSaveInitMenus() {
      this.dialogVisible1 = true
    },

    // 设置菜单选项
    doMenusProps(cloneList) {
      for (let i = 0; i < cloneList.length; i++) {
        const item = cloneList[i]
        if (item.type === 2) { // 按钮
          item.disabled = 'disabled'
        }
        if (item.children && item.children.length > 0) {
          this.doMenusProps(item.children)
        } else {
          delete item.children
        }
      }
    },

    // 规整meta数据
    doMetaMeg() {
      //  meta: "{\"title\":\"商品管理\",\"icon\":\"el-icon-s-shop\"}"
    },
    // 删除选择的meta
    doRemove(idx) {
      this.meta.splice(idx, 1)
    },
    // 添加 新的meta
    doAddMeat() {
      this.meta.push({
        text: '',
        msg: ''
      })
    },
    // 新增菜单
    doAddMenu() {
      this.dialogVisible = true
    },

    // 获取所有菜单
    async getfindAllPermissions() {
      const res = await findAllPermissions()
      const { data: { menus }, success } = res
      if (success) {
        this.allMenuList = menus
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
